<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="bootstrap.min.css">
    <script src="jquery.min.js"></script>
    <style>
        .form-horizontal{
            margin-top: 20px;
            width: 500px;
        }
    </style>
</head>
<body>
    <div>
        <h3>高新一小学生管理系统登录界面</h3>
        <div class="form-horizontal">
            <!-- 用户名的输入框的设置 -->
            <div class="form-group">
                <label for="data-username" class="col-sm-2 control-label">用户名</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="data-username" placeholder="用户名">
                </div>
            </div>
            <!-- 密码的输入框的设置 -->
            <div class="form-group">
                <label for="data-password" class="col-sm-2 control-label">密码</label>
                <div class="col-sm-10">
                    <input type="password" class="form-control" id="data-password" placeholder="密码">
                </div>
            </div>
            <!-- 30天免登录 -->
            <div class="form-group remember">
                <div class="col-sm-10" style="padding-left:80px;">
                    <input style="margin-right: 20px;" type="checkbox" name="" id="data-rem">
                    30天免登录&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <button class="btn btn-primary register">立即注册</button>
                </div>
            </div>
             <!-- 确认或则取消的输入框的设置 -->
            <div class="form-group" style="transform: translateX(100px);">
                <button id="submit" class="btn btn-primary">登录</button>
                <button id="cancel" class="btn btn-default">取消</button> 
            </div>
        </div>
    </div> 
    <script>
        $("#data-username").focus();
        let cookieRecord = document.cookie;
        console.log(cookieRecord)
        function getCookie(data){
            let arrMessage = document.cookie.split("; ");
            let result = {};
            arrMessage.forEach(element=>{
                let key = element.split("=")[0];
                let value = element.split("=")[1];
                result[key] = value;
            })
            // if(!data){
            //     return result;
            // }
            // if(data){
            //     return result[data];
            // }
            //和下面的写法等价
            if(data){
                return result[data];
            }
            return result;
        }
        let userObj = getCookie();
        console.log(userObj)
        $("#data-username").blur(function(){
            if(!$("#data-username").val()){
                console.log(0)
                alert("请输入用户名");
                return;   
            }
            let isHavUsername = getCookie($("#data-username").val());
            console.log(isHavUsername)
            if(!isHavUsername){
                console.log(isHavUsername)
                console.log(8)
                return;
            }
            else{
                console.log(JSON.parse(isHavUsername)[0].password)
                $("#data-password").val(JSON.parse(isHavUsername)[0].password);
                sessionStorage.setItem("userinfo",isHavUsername);
                location.href = "http://127.0.0.1:8800/students.html";  
            }
          
        })
        $("#submit").click(function(){
            let username = $("#data-username").val();
            let password = $("#data-password").val();
            if($("#data-username").val() && $("#data-password").val()){
                $.ajax({
                    url:"http://127.0.0.1:8800/login",
                    method:"get",
                    data:{
                        username,
                        password,
                    },
                    success(data){
                        if(data === "error"){
                            alert("登录失败")
                        }
                        else{
                            if(data === "验证失败"){
                               alert(data);
                            }
                            else{
                                let now = new Date();
                                let m = new Date().getDate() + 30;
                                now.setDate(m);
                                console.log(data[0]);
                                console.log(now)
                                sessionStorage.setItem("userinfo",JSON.stringify(data));
                                if($("#data-rem")[0].checked){
                                    console.log(0);
                                    document.cookie = `${data[0].username} = ${JSON.stringify(data)};expires=${now}`;
                                }  
                                location.href = "http://127.0.0.1:8800/students.html";     
                            }
                        }       
                    }
                })
            }
            else{
                alert("请输入正确的用户名和密码");
            }
        })

        //回车键按下的事件
        document.onkeydown = function(event){
            if(event.keyCode === 13){
                let isHavname = getCookie($("#data-username").val());
                console.log(isHavname)
                if(isHavname){
                    console.log(0)
                    $("#data-username").blur();
                }
                else{
                    console.log(9)
                    $("#submit").click();
                }     
            }
        }
        $(".register").click(function(){
            location.href = "http://127.0.0.1:8800/register.html"; 
        })
    </script>
</body>
</html>